<template>
  <div class="msg-warn" v-if="show" :style="{ background: backgroundColor }">
    <div class="content">
      <slot name="icon"></slot>
      <span>{{ content }}</span>
    </div>
    <i v-if="close" class="MC_iconfont MC_icon-zhuangtai-guanbi" @click="closeAlert"></i>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'AlertMsg',
  props: {
    content: {
      type: String,
      default: ''
    },
    close: {
      type: Boolean,
      default: false
    },
    backgroundColor: {
      type: String,
      default: 'rgba(28, 97, 241, 0.1)'
    }
  },
  components: {},
  setup() {
    const show = ref(true)
    const closeAlert = () => {
      show.value = false
    }
    return {
      show,
      closeAlert
    }
  }
})
</script>

<style lang="stylus" scoped>
.msg-warn
  margin-bottom 16px
  font-size 14px
  color rgba(0, 0, 0, 0.88)
  display: flex;
  align-items: center;
  padding: 8px 24px 8px 20px;
  border-radius: 4px;
  .content
    display flex
    align-items center
    line-height 20px
  .MC_icon-zhuangtai-guanbi
    cursor pointer
</style>
<style lang="stylus">
.msg-warn
  .MC_icon-xinxi-mian
    color var(--mc-link-color)
    margin-right 10px
</style>
